<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/product.css">
</head>

<body>
    <!-- 导航栏 -->
    <header>
        <a href="#"><img src="../imgs/logo.jpg" class="logo"></a>
        <ul class="nav">
            <li><a href="../index.html">企业首页</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="news_center.html">新闻中心</a></li>
            <li class="nav_active"><a href="pro_center.html">产品中心</a></li>
            <li><a href="service.html">客户服务</a></li>
            <li><a href="contact.html">联系我们</a></li>
        </ul>
    </header>

    <!-- 轮播banner -->
    <div class="banner">
        <!-- 图片 -->
        <div class="banner_box">
            <div class="banner_img show">
                <img src="../imgs/banner_01.jpg">
            </div>
            <div class="banner_img">
                <img src="../imgs/banner_02.jpg">
            </div>
            <div class="banner_img">
                <img src="../imgs/banner_03.jpg">
            </div>
        </div>
        <!-- 切图按钮 -->
        <div class="img_btn left_btn"><img src="../imgs/left_btn.png"></div>
        <div class="img_btn right_btn"><img src="../imgs/right_btn.png"></div>
    </div>

    <!-- 中间部分 -->
    <div class="mid">
        <!-- 左边导航 -->
        <div class="mid_left">
            <div class="top">
                <h3>PRODUCTION</h3>
                <p>产品中心</p>
            </div>
            <div class="service_list">
                <ul>
                    <li>&bull; 饮水机>></li>
                    <li>&bull; 冰箱>></li>
                    <li>&bull; 洗衣机>></li>
                    <li>&bull; 空调>></li>
                    <li>&bull; 其他>></li>
                </ul>
            </div>

            <!-- 搜索 -->
            <div class="search">
                <div class="top">
                    <h3>SEARCH</h3>
                    <p>搜索</p>
                </div>
                <div class="search_box">
                    <input type="text">
                    <img src="../imgs/search.png" alt="">
                </div>
            </div>
        </div>
        <!-- 右边内容-产品展示 -->
        <div class="mid_right_display" >
            <div class="position_top">
                <p class="top_title"><span>产品中心</span>PRODUCTION</p>
                <p class="position_tip">您当前位置>首页><span>产品中心</span></p>
            </div>
            <!-- 产品图片 -->
            <div class="pro_photo">
                <!-- 第一排 -->
                <div class="pro_photo_box">
                    <div class="img_box"  onclick="RightDetail(1)">
                        <div class="pro_img">
                            <img src="../imgs/pro-center1.jpg" alt="">
                        </div>
                        <div class="pro_box">
                            <p>微波炉-MA323BFS</p>
                        </div>
                    </div>
                    <div class="img_box"  onclick="RightDetail(2)">
                        <div class="pro_img">
                            <img src="../imgs/pro-center2.jpg" alt="">
                        </div>
                        <div class="pro_box">
                            <p>饮水机-NC-ZA1</p>
                        </div>
                    </div>
                    <div class="img_box" onclick="RightDetail(3)">
                        <div class="pro_img">
                            <img src="../imgs/pro-center4.jpg" alt="">
                        </div>
                        <div class="pro_box">
                            <p>迷你音响-RS-168</p>
                        </div>
                    </div>
                </div>
                <!-- 第二排 -->
                <div class="pro_photo_box">
                    <div class="img_box" onclick="RightDetail(4)">
                        <div class="pro_img">
                            <img src="../imgs/pro-center3.jpg" alt="">
                        </div>
                        <div class="pro_box">
                            <p>电饭锅-RC-10ZWH</p>
                        </div>
                    </div>
                    <div class="img_box" onclick="RightDetail(5)">
                        <div class="pro_img">
                            <img src="../imgs/pro-center5.jpg" alt="">
                        </div>
                        <div class="pro_box">
                            <p>空气净化器-FES-547</p>
                        </div>
                    </div>
                    <div class="img_box" onclick="RightDetail(6)">
                        <div class="pro_img">
                            <img src="../imgs/pro-center6.jpg" alt="">
                        </div>
                        <div class="pro_box">
                            <p>电热水器-ARC-1</p>
                        </div>
                    </div>
                </div>
                <!-- 第三排 -->
                <div class="pro_photo_box">
                    <div class="img_box" onclick="RightDetail(7)">
                        <div class="pro_img">
                            <img src="../imgs/product07.png" alt="">
                        </div>
                        <div class="pro_box">
                            <p>迷你风扇-HES-1483</p>
                        </div>
                    </div>
                    <div class="img_box" onclick="RightDetail(8)">
                        <div class="pro_img">
                            <img src="../imgs/product08.png" alt="">
                        </div>
                        <div class="pro_box">
                            <p>迷你风扇-HE-1359</p>
                        </div>
                    </div>
                    <div class="img_box" onclick="RightDetail(9)">
                        <div class="pro_img">
                            <img src="../imgs/product09.png" alt="">
                        </div>
                        <div class="pro_box">
                            <p>智能吸尘器-DE-137</p>
                        </div>
                    </div>
                </div>
                <!-- 第四排 -->
                <div class="pro_photo_box">
                    <div class="img_box" onclick="RightDetail(10)">
                        <div class="pro_img">
                            <img src="../imgs/product10.png" alt="">
                        </div>
                        <div class="pro_box">
                            <p>打印机-DJ-360</p>
                        </div>
                    </div>
                    <div class="img_box" onclick="RightDetail(11)">
                        <div class="pro_img">
                            <img src="../imgs/product11.png" alt="">
                        </div>
                        <div class="pro_box">
                            <p>饮水机-NC-648</p>
                        </div>
                    </div>
                    <div class="img_box" onclick="RightDetail(12)">
                        <div class="pro_img">
                            <img src="../imgs/product12.png" alt="">
                        </div>
                        <div class="pro_box">
                            <p>电驱虫器-DQ-173</p>
                        </div>
                    </div>
                </div>

                <!-- 页码 -->
                <div class="page_box">
                    <div class="last_btn">上一页</div>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>...</li>
                    </ul>
                    <div class="next_btn">下一页></div>
                </div>
            </div>
        </div>

        <!-- 右边内容-产品详情 -->
        <div class="mid_right_detail" style="display: none;">
            <div class="position_top">
                <p class="top_title"><span>产品详情</span>PRODUCTION DETAILS</p>
                <p class="position_tip">您当前位置>首页><a onclick="RightDisplay()">产品中心</a>><span>More</span></p>
            </div>
            <!-- 产品详情 -->
            <div class="pro_detail">
               <div class="pro_detail_photo">
                   <img src="../imgs/pro-detail01.png" alt="">
               </div>
              <div class="pro_text">
                  <div class="pro_title">
                      <h3>嘉德龙电磁炉-ST2106</h3>
                      <p>生活烹饪，节日聚会，约会女神必备神器！现在购物送炒锅和汤锅！</p>
                  </div>
                  <div class="pro_introduce">
                      <p>型号：ST2106</p>
                      <p>颜色：黑色</p>
                      <p>重量：6.0kg</p>
                      <p>面板材质：BOKING微晶面板</p>
                      <p>产品尺寸：290*365*60mm</p>
                      <p>产品特性：防刮耐磨，健康炒“节能烹饪程序，聚能加热技术，</p>
                        <p class="span">多点测温技术，双环节能线盘”。此款商品型号为</p>
                        <p class="span">C21-ST2106，货号为ST2106。赠送炒锅和汤锅。</p>
                  </div>
              </div>
            </div>
       
        </div>
    </div>
    <!-- 底部 -->
    <footer>
        <div class="footer_box">
            <div class="list">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">公司简介</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">企业荣誉</a></li>
                    <li><a href="#">资格认证</a></li>
                    <li><a href="#">研发生产</a></li>
                </ul>
            </div>

            <div class="list">
                <ul>
                    <li><a href="#">产品中心</a></li>
                    <li><a href="#">饮水机</a></li>
                    <li><a href="#">冰箱</a></li>
                    <li><a href="#">洗衣机</a></li>
                    <li><a href="#">空调</a></li>
                    <li><a href="#">其他产品</a></li>
                </ul>
            </div>

            <div class="list">
                <ul>
                    <li><a href="#">新闻中心</a></li>
                    <li><a href="#">最新动态</a></li>
                    <li><a href="#">行业新闻</a></li>
                    <li><a href="#">热点聚焦</a></li>
                    <!-- <li><a href="#">行业新闻</a></li>
                    <li><a href="#">热点聚焦</a></li> -->
                </ul>
            </div>

            <div class="list">
                <ul>
                    <li><a href="#">客户服务</a></li>
                    <li><a href="#">招商加盟</a></li>
                    <li><a href="#">购买流程</a></li>
                    <li><a href="#">售后服务</a></li>
                    <li><a href="#">技术支持</a></li>
                    <li><a href="#">常见问题</a></li>
                </ul>
            </div>

            <div class="list">
                <ul>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">在线留言</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </div>
            <div class="input_box">
                <input type="text" class="name" value="请输入您的姓名">
                <input type="text" class="phone" value="请输入您的联系方式">
                <textarea>请输入您的留言</textarea><br>
                <input type="button" value="提交">
            </div>
        </div>
        <hr>
        <p class="footer_text">Copyright02016WenCun.com A1l Rights Reserved
            Design by WenCun 粤ICP备13005446号-1</p>
    </footer>
    <script src="../js/banner.js"></script>
    <script src="../js/product.js"></script>
</body>

</html>